<template>
    <div class="guan">
        <div>
            <el-table :data="stuce">
                <el-table-column prop="id" label="主键编号"></el-table-column>
                <el-table-column prop="goodsName" label="物资名称"></el-table-column>
                <el-table-column prop="goodsAmount" label="物资申请数量"></el-table-column>
                <el-table-column prop="goodsId" label="物资编号"></el-table-column>
                <el-table-column prop="goodsApplicantId" label="物资申请人id"></el-table-column>
                <el-table-column prop="goodsApplicantName" label="物资申请人名字"></el-table-column>
                <el-table-column prop="examineStatus" label="申请状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.examineStatus === 1" type="primary">等待审批</el-tag>
                        <el-tag v-else-if="scope.row.examineStatus === 2" type="success">审批通过</el-tag>
                        <el-tag v-else-if="scope.row.examineStatus === 3" type="danger">审批拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="examineReason" label="审批结果"></el-table-column>
                <el-table-column label="操作" >
                    <template  slot-scope="scope">
                        <el-button v-if="scope.row.examineStatus==1" type="primary" size="mini" @click="handleApprove(scope.row)">审批通过</el-button>
                        <el-button v-if="scope.row.examineStatus==1" type="danger" size="mini" @click="handleReject(scope.row)">拒绝通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="提示" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="请输入拒绝原因" :label-width="formLabelWidth">
                        <el-input v-model="names" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogForm">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Guan",
        data(){
            return{
                stuce:[],
                names:"",
                dialogFormVisible:false,
                ffe:{
                    examineReason:"",
                },
                // 这些是给大家模拟的假数据，请你在fetchGoodsOptions方法进行异步查询，下面假数据你看懂意思后，请删除掉，不要用假数据来迷惑老师
                tableData: [
                    {
                        id: 1,
                        goods_name: '物资1',
                        goods_amount: 10,
                        goods_id: 'G001',
                        goods_applicant_id: 1001,
                        goods_applicant_name: '张三',
                        examine_status: 1,
                        examine_reason: ''
                    },
                    {
                        id: 2,
                        goods_name: '物资2',
                        goods_amount: 20,
                        goods_id: 'G002',
                        goods_applicant_id: 1002,
                        goods_applicant_name: '李四',
                        examine_status: 2,
                        examine_reason: ''
                    },
                    {
                        id: 3,
                        goods_name: '物资3',
                        goods_amount: 30,
                        goods_id: 'G003',
                        goods_applicant_id: 1003,
                        goods_applicant_name: '王五',
                        examine_status: 3,
                        examine_reason: '物资数量不足'
                    },

                ],
                dialogVisible: false,
                form: {
                    rejectReason: ''
                },
                rejectRow: {}
            }
        },
        methods:{
            initData(){
                this.axios.post(`http://localhost:82/stuce/findAll`).then(res=>{
                    this.stuce=res.data;
                })
            },
            handleReject(row){
                this.dialogFormVisible=true;
                this.ffe=row;
            },
            dialogForm(){
                this.ffe.examineReason=this.names;
                this.axios.post(`http://localhost:82/stuce/updates`,this.ffe).then(res=>{
                    if (res.data.code==0) {
                        this.dialogFormVisible=false;
                        this.initData();
                        this.$message.success("审批通过")
                    }
                })
            },
            handleApprove(row){
                this.axios.post(`http://localhost:82/stuce/update`,row).then(res=>{
                    if (res.data.code==0) {
                        this.initData();
                        this.$message.success("审批通过")
                    }
                })
            }
        },
        created(){
            this.initData();
        }
    }
</script>

<style scoped>

</style>